<template>
    <div>
        <div class="container loginIn" style="backgroundImage: url(/img/bg.jpg)">
            <!-- <div class="container loginIn" style="backgroundImage: url(http://codegen.caihongy.cn/20201125/f8ad26215c3a4476a1022930617e90f1.jpg)"> -->
<!--213-->
            <div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'"
                style="backgroundColor: rgba(244, 244, 239, 0.95)">
                <el-form class="login-form" label-position="left" :label-width="1 == 3 ? '56px' : '0px'">
                    <div class="title-container">
                        <h3 class="title" style="color: rgba(21, 21, 20, 1)">企业oa管理系统登录</h3>
                    </div>

                    <el-form-item :label="1 == 3 ? '用户名' : ''" :class="'style' + 1">
                        <span v-if="1 != 3" class="svg-container"
                            style="color:rgba(183, 131, 59, 1);line-height:44px"><svg-icon icon-class="user" /></span>
                        <el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
                    </el-form-item>

                    <el-form-item :label="1 == 3 ? '密码' : ''" :class="'style' + 1">
                        <span v-if="1 != 3" class="svg-container"
                            style="color:rgba(183, 131, 59, 1);line-height:44px"><svg-icon
                                icon-class="password" /></span>
                        <el-input placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password" />
                    </el-form-item>

                    <el-form-item class="code" :label="1 == 3 ? '验证码' : ''" :class="'style' + 1">
                        <span v-if="1 != 3" class="svg-container"
                            style="color:rgba(183, 131, 59, 1);line-height:44px"><svg-icon icon-class="code" /></span>
                        <el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" />
                        <div class="getCodeBt" @click="getRandCode(4)" style="height:44px;line-height:44px">
                            <span v-for="(item, index) in codes" :key="index"
                                :style="{ color: item.color, transform: item.rotate, fontSize: item.size }">{{ item.num
                                }}</span>
                        </div>
                    </el-form-item>



                    <el-form-item prop="loginInRole" class="role" label-width="20px" style="margin-bottom: 10px;">
                        <label for="loginInRole" class="el-form-item__label"
                            style="width: 50px; color: rgb(183, 131, 59); font-size: 18px;">
                            角色
                        </label>
                        <el-radio-group v-model="rulesForm.role" class="role-group" style="margin-left: 10px;">
                            <el-radio v-for="item in menus" v-if="item.hasBackLogin === '是'" :key="item.roleName"
                                :label="item.roleName" class="role-radio" style="margin-right: 20px; font-size: 16px;">
                                {{ item.roleName }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>






                    <el-button type="primary" @click="login()" class="loginInBt"
                        style="padding:0;font-size:16px;border-radius:20px;height:44px;line-height:44px;width:100%;backgroundColor:rgba(203, 185, 86, 1); borderColor:rgba(203, 185, 86, 1); color:rgba(47, 43, 43, 1)">{{
                            '1'
                                == '1' ? '登录' : 'login' }}</el-button>


                    <el-form-item class="setting">
                        <div class="register" @click="register('yonghu')"
                            style="color: rgba(26, 24, 20, 0.85); margin-left: 20px; margin-top: 20px; font-size: 16px;">
                            注册用户
                        </div>
                        <!-- <div style="color:rgba(26, 24, 20, 0.85)" class="reset">修改密码</div> -->
                    </el-form-item>


                </el-form>
            </div>

        </div>
    </div>
</template>
<script>
import menu from "@/utils/menu";
export default {
    data() {
        return {
            rulesForm: {
                username: "",
                password: "",
                role: "",
                code: '',
            },
            menus: [],
            tableName: "",
            codes: [{
                num: 1,
                color: '#000',
                rotate: '10deg',
                size: '16px'
            }, {
                num: 2,
                color: '#000',
                rotate: '10deg',
                size: '16px'
            }, {
                num: 3,
                color: '#000',
                rotate: '10deg',
                size: '16px'
            }, {
                num: 4,
                color: '#000',
                rotate: '10deg',
                size: '16px'
            }],
        };
    },
    mounted() {
        let menus = menu.list();
        this.menus = menus;
    },
    created() {
        this.setInputColor()
        this.getRandCode()
    },
    methods: {
        setInputColor() {
            this.$nextTick(() => {
                document.querySelectorAll('.loginIn .el-input__inner').forEach(el => {
                    el.style.backgroundColor = "rgba(211, 204, 204, 0.26)"
                    el.style.color = "rgba(120, 118, 118, 1)"
                    el.style.height = "44px"
                    el.style.lineHeight = "44px"
                    el.style.borderRadius = "20px"
                    el.style.padding = "0 20px 0 40px" // 上右下左
                })
                document.querySelectorAll('.loginIn .style3 .el-form-item__label').forEach(el => {
                    el.style.height = "44px"
                    el.style.lineHeight = "44px"
                    // el.style.weight = "30px");

                })
                document.querySelectorAll('.loginIn .el-form-item__label').forEach(el => {
                    el.style.color = "rgba(183, 131, 59, 1)"
                })
                setTimeout(() => {
                    document.querySelectorAll('.loginIn .role .el-radio__label').forEach(el => {
                        el.style.color = "rgba(183, 131, 59, 1)"
                    })
                }, 350)
            })

        },
        register(tableName) {
            this.$storage.set("loginTable", tableName);
            this.$router.push({ path: '/register' })
        },
        // 登陆
        login() {
            let code = ''
            for (let i in this.codes) {
                code += this.codes[i].num
            }
            if (!this.rulesForm.code) {
                this.$message.error("请输入验证码");
                return;
            }
            if (this.rulesForm.code.toLowerCase() != code.toLowerCase()) {
                this.$message.error("验证码输入有误");
                this.getRandCode()
                return;
            }
            if (!this.rulesForm.username) {
                this.$message.error("请输入用户名");
                return;
            }
            if (!this.rulesForm.password) {
                this.$message.error("请输入密码");
                return;
            }
            if (!this.rulesForm.role) {
                this.$message.error("请选择角色");
                return;
            }
            let menus = this.menus;
            for (let i = 0; i < menus.length; i++) {
                if (menus[i].roleName == this.rulesForm.role) {
                    this.tableName = menus[i].tableName;
                }
            }
            this.$http({
                url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
                method: "post"
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.$storage.set("Token", data.token);
                    this.$storage.set("role", this.rulesForm.role);
                    this.$storage.set("sessionTable", this.tableName);
                    this.$storage.set("adminName", this.rulesForm.username);
                    this.$router.replace({ path: "/index/" });
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
        getRandCode(len = 4) {
            this.randomString(len)
        },
        randomString(len = 4) {
            let chars = [
                "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",
                "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
                "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",
                "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
                "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",
                "3", "4", "5", "6", "7", "8", "9"
            ]
            let colors = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]
            let sizes = ['14', '15', '16', '17', '18']

            let output = [];
            for (let i = 0; i < len; i++) {
                // 随机验证码
                let key = Math.floor(Math.random() * chars.length)
                this.codes[i].num = chars[key]
                // 随机验证码颜色
                let code = '#'
                for (let j = 0; j < 6; j++) {
                    let key = Math.floor(Math.random() * colors.length)
                    code += colors[key]
                }
                this.codes[i].color = code
                // 随机验证码方向
                let rotate = Math.floor(Math.random() * 60)
                let plus = Math.floor(Math.random() * 2)
                if (plus == 1) rotate = '-' + rotate
                this.codes[i].rotate = 'rotate(' + rotate + 'deg)'
                // 随机验证码字体大小
                let size = Math.floor(Math.random() * sizes.length)
                this.codes[i].size = sizes[size] + 'px'
            }
        },
    }
};
</script>
<style lang="scss" scoped>
.loginIn {
    min-height: 100vh;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 360px;
        height: 100%;

        .login-form {
            background-color: transparent;
            width: 100%;
            right: inherit;
            padding: 0 12px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .title-container {
            text-align: center;
            font-size: 24px;

            .title {
                margin: 20px 0;
            }
        }

        .el-form-item {
            position: relative;

            .svg-container {
                padding: 6px 5px 6px 15px; // 移除原有的 padding
                color: #889aa4;
                vertical-align: middle;
                display: inline-block;
                position: absolute;
                //  left: 15px;  //  改为左边 15px 的间距
                top: 0;
                z-index: 1;
                padding: 0;
                line-height: 40px;
                width: 30px;
                text-align: center;
            }

            .el-input {
                display: inline-block;
                height: 40px;
                width: 100%;

                &>>>input {
                    background: transparent;
                    border: 0px;
                    -webkit-appearance: none;
                    padding: 0 15px 0 30px;
                    color: #fff;
                    height: 40px;
                }
            }

        }


    }

    .center {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 360px;
        transform: translate3d(-50%, -50%, 0);
        height: 446px;
        border-radius: 8px;
    }

    .right {
        position: absolute;
        left: inherit;
        right: 0;
        top: 0;
        width: 360px;
        height: 100%;
    }

    .code {
        .el-form-item__content {
            position: relative;

            .getCodeBt {
                position: absolute;
                right: 0;
                top: 0;
                line-height: 40px;
                width: 100px;
                background-color: rgba(51, 51, 51, 0.4);
                color: #fff;
                text-align: center;
                border-radius: 0 4px 4px 0;
                height: 40px;
                overflow: hidden;

                span {
                    padding: 0 5px;
                    display: inline-block;
                    font-size: 16px;
                    font-weight: 600;
                }
            }

            .el-input {
                &>>>input {
                    padding: 0 130px 0 30px;
                }
            }
        }
    }

    .setting {
        &>>>.el-form-item__content {
            padding: 0 15px;
            box-sizing: border-box;
            line-height: 32px;
            height: 32px;
            font-size: 14px;
            color: #999;
            margin: 0 !important;

            .register {
                margin-left: 40px;
                width: 50%;
            }

            .reset {
                float: right;
                width: 50%;
                text-align: right;
            }
        }
    }

    .style2 {
        padding-left: 30px;

        .svg-container {
            left: -30px !important;
        }

        .el-input {
            &>>>input {
                padding: 0 5px !important;
            }
        }
    }

    .code.style2,
    .code.style3 {
        .el-input {
            &>>>input {
                padding: 0 115px 0 15px;
            }
        }
    }

    .style3 {
        &>>>.el-form-item__label {
            padding-right: 6px;
            width: 30px;
        }

        .el-input {
            &>>>input {
                padding: 0 15px !important;
            }
        }
    }

    .role {
        line-height: 50px;

        &>>>.el-form-item__label {
            width: 56px !important;
        }

        &>>>.el-form-item__content {
            vertical-align: middle;
            line-height: inherit;
        }


        &>>>.el-radio {
            margin-right: 12px;
        }
    }


    /* 设置角色组的横向布局和间距 */
    .role-group {
        display: flex;
        /* 保持水平布局 */
        /* 根据需要调整宽度 */
        gap: 6px;
        /* 增加角色之间的间距 */
        margin-left: 50px;
        margin-top: 9px;
    }

    /* 单独控制每个角色的样式（如果需要更精细控制） */
    .role-radio {

        text-align: center;
        /* 保持文字对齐 */
        margin-left: 28px;

    }


}
</style>
